<!--
 * @Description: 登录页面
 * @Author: Aroma
 * @Date: 2024-11-13 20:48:50
 * @LastEditors: Aroma
 * @LastEditTime: 2024-11-14 08:52:54
 * @别瞎看: 你个无脑牛马
-->
<template>
    <div class="login-form">
      <h2>登录</h2>
      <form @submit.prevent="handleLogin">
        <div>
          <label for="username">用户名:</label>
          <input type="text" id="username" v-model="username" required />
        </div>
        <div>
          <label for="password">密码:</label>
          <input type="password" id="password" v-model="password" required />
        </div>
        <button type="submit">登录</button>
      </form>
      <p v-if="loginError" class="error">{{ loginError }}</p>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const username = ref('');
  const password = ref('');
  const loginError = ref('');
  
  const handleLogin = () => {
    if (username.value === 'admin' && password.value === '123') {
      loginError.value = '';
      alert('登录成功');
      // 可以在这里进行路由跳转或其他操作
    } else {
      loginError.value = '用户名或密码错误';
    }
  };
  </script>
  
  <style scoped>
  .login-form {
    max-width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .error {
    color: red;
  }
  </style>